<div ng-controller="PanelSocioController">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
    <span ng-bind="alert.msg"></span>
</alert>
<fieldset>
    <legend style="padding-bottom: 5px;">
        <div class="row">
            <div class="col-sm-6">
                Socio
                <span ng-if="!socio.estado" class="label label-danger">Socio Inactivo</span>
            </div>
            <div class="col-sm-6" ng-if="socio.estado" style="text-align: right;font-size: 14px;">
                <div class="btn-group">
                    <button type="button" ng-if="cuentaAporte.estadoCuenta == 'ACTIVO'" ng-click="congelarCuentaAporte()" popover="Congelar cuenta aporte" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Congelado</button>
                    <button type="button" ng-if="cuentaAporte.estadoCuenta == 'CONGELADO'" ng-click="descongelarCuentaAporte()" popover="Descongelar cuenta aportes" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default active">Congelado</button>
                    <button type="button" ng-click="inactivarSocio()" popover="Eliminar socio" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-default">Inactivar</button>
                </div>
            </div>
        </div>
    </legend>
</fieldset>
<div class="row">
    <div class="col-sm-6">
        <div class="panel panel-default" ng-show="personaNatural">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-6" style="font-weight: bold;">Persona</div>
                    <div class="col-md-6">
                        <div class="text-right">
                            <button type="button" ng-click="editarSocioPN()" class="btn btn-link" style="padding: 0px 12px;">
                                Editar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-4">
                        <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="img-circle center-block" style="max-width: 105px; max-height: 105px;">
                    </div>
                    <div class="col-sm-8">
                        <!--Persona natural-->
                        <table class="table table-condensed">
                            <tr>
                                <td colspan="1" style="font-size: 12px; width: 80px;"><strong>Pa&iacute;s:</strong></td>
                                <td colspan="1" style="font-size: 12px;"><span ng-bind="pais.denominacion"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;"><strong>Documento:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind-template="{{personaNatural.tipoDocumento.abreviatura}}/{{personaNatural.numeroDocumento}}"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;"><strong>Socio:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind-template="{{personaNatural.apellidoPaterno}} {{personaNatural.apellidoMaterno}}, {{personaNatural.nombres}}"></span></td>
                            </tr>
                            <tr><td></td><td></td></tr>
                        </table>
                    </div>
                </div>
            </div>
            <table class="table table-condensed">
                <tr>
                    <td colspan="1" style="font-size: 12px; width: 80px;"><strong>Fecha Nac.:</strong></td>
                    <td colspan="1" style="font-size: 12px; width: 130px;"><span ng-bind="personaNatural.fechaNacimiento | date : 'dd/MM/yyyy'"></span></td>
                    <td colspan="1" style="font-size: 12px; width: 60px;"><strong>Sexo:</strong></td>
                    <td colspan="1" style="font-size: 12px;"><span ng-bind="personaNatural.sexo"></span></td>
                </tr>
                <tr>
                    <td style="font-size: 12px;"><strong>E. Civil:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="personaNatural.estadoCivil"></span></td>
                    <td style="font-size: 12px;"><strong>Ocupaci&oacute;n:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="personaNatural.ocupacion"></span></td>
                </tr>
                <tr>
                    <td colspan="1" style="font-size: 12px;"><strong>Direcci&oacute;n:</strong></td>
                    <td colspan="3" style="font-size: 12px;"><span ng-bind-template="{{personaNatural.direccion}} - {{personaNatural.referencia}}"></span></td>
                </tr>
                <tr>
                    <td style="font-size: 12px;"><strong>Telefono:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="personaNatural.telefono"></span></td>
                    <td style="font-size: 12px;"><strong>Celular:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="personaNatural.celular"></span></td>
                </tr>
                <tr>
                    <td colspan="1" style="font-size: 12px;"><strong>Email:</strong></td>
                    <td colspan="3" style="font-size: 12px;"><span ng-bind="personaNatural.email"></span></td>
                </tr>
            </table>
        </div>
        <div ng-show="personaJuridica">
            <tabset>
                <tab heading="Persona Juridica">
                    <div class="panel panel-default">
                    
                        <table class="table table-condensed">
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Documento:</strong></td>
                                <td style="font-size: 12px;" colspan="3"><span ng-bind-template="{{personaJuridica.tipoDocumento.abreviatura}}/{{personaJuridica.numeroDocumento}}"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Raz&oacute;n Social:</strong></td>
                                <td style="font-size: 12px;" colspan="3"><span ng-bind="personaJuridica.razonSocial"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Fecha Constituci&oacute;n:</strong></td>
                                <td style="font-size: 12px;" colspan="3"><span ng-bind="personaJuridica.fechaConstitucion | date : 'dd/MM/yyyy'"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Nombre Comercial:</strong></td>
                                <td style="font-size: 12px;" colspan="3"><span ng-bind="personaJuridica.nombreComercial"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px; width: 130px;" colspan="1"><strong>Tipo Empresa:</strong></td>
                                <td style="font-size: 12px; width: 120px;" colspan="1"><span ng-bind="personaJuridica.tipoEmpresa"></span></td>
                                <td style="font-size: 12px; width: 70px;" colspan="1"><strong>Fin Lucro:</strong></td>
                                <td style="font-size: 12px;" colspan="1"><span ng-cloak>{{personaJuridica.finLucro ? 'SI' : 'NO'}}</span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Direcci&oacute;n:</strong></td>
                                <td colspan="3" style="font-size: 12px;"><span ng-bind-template="{{personaJuridica.direccion}}-{{personaJuridica.referencia}}"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;"><strong>Telefono:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.telefono"></span></td>
                                <td style="font-size: 12px;"><strong>Celular:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.celular"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Email:</strong></td>
                                <td colspan="3" style="font-size: 12px;"><span ng-bind="personaJuridica.email"></span></td>
                            </tr>
                        </table>
                    </div>
                </tab>
                <tab heading="Representante Legal">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-md-6" style="font-weight: bold;">Representante Legal</div>
                                <div class="col-md-6">
                                    <div class="text-right">
                                        <button type="button" ng-click="editarRepresentantePJ()" class="btn btn-link" style="padding: 0px 12px;">
                                            Editar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="img-circle center-block" style="max-width: 105px; max-height: 105px;">
                                </div>
                                <div class="col-sm-8">
                                    <!--Persona natural-->
                                    <table class="table table-condensed">
                                        <tr>
                                            <td style="font-size: 12px;"><strong>Pais:</strong></td>
                                            <td style="font-size: 12px;"><span ng-bind="pais.denominacion"></span></td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 12px;"><strong>Documento:</strong></td>
                                            <td style="font-size: 12px;"><span ng-bind-template="{{personaJuridica.representanteLegal.tipoDocumento.abreviatura}}/{{personaJuridica.representanteLegal.numeroDocumento}}"></span></td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 12px;"><strong>Socio:</strong></td>
                                            <td style="font-size: 12px;"><span ng-bind-template="{{personaJuridica.representanteLegal.apellidoPaterno}} {{personaJuridica.representanteLegal.apellidoMaterno}}, {{personaJuridica.representanteLegal.nombres}}"></span></td>
                                        </tr>
                                        <tr><td></td><td></td></tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <table class="table table-condensed">
                            <tr>
                                <td style="font-size: 12px; width: 85px;" colspan="1"><strong>Fecha Nac.:</strong></td>
                                <td style="font-size: 12px; width: 105px;" colspan="1"><span ng-bind="personaJuridica.representanteLegal.fechaNacimiento | date : 'dd/MM/yyyy'"></span></td>
                                <td style="font-size: 12px; width: 80px;" colspan="1"><strong>Sexo:</strong></td>
                                <td style="font-size: 12px;" colspan="1"><span ng-bind="personaJuridica.representanteLegal.sexo"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;"><strong>Estado Civil:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.representanteLegal.estadoCivil"></span></td>
                                <td style="font-size: 12px;"><strong>Ocupaci&oacute;n:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.representanteLegal.ocupacion"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Direcci&oacute;n:</strong></td>
                                <td colspan="3" style="font-size: 12px;"><span ng-bind-template="{{personaJuridica.representanteLegal.direccion}} - {{personaJuridica.representanteLegal.referencia}}"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;"><strong>Telefono:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.representanteLegal.telefono"></span></td>
                                <td style="font-size: 12px;"><strong>Celular:</strong></td>
                                <td style="font-size: 12px;"><span ng-bind="personaJuridica.representanteLegal.celular"></span></td>
                            </tr>
                            <tr>
                                <td style="font-size: 12px;" colspan="1"><strong>Email:</strong></td>
                                <td colspan="3" style="font-size: 12px;"><span ng-bind="personaJuridica.representanteLegal.email"></span></td>
                            </tr>
                        </table>
                    </div>
                </tab>
            </tabset>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-12" style="font-weight: bold;">
                        Datos del Socio
                    </div>
                </div>
            </div>
            <table class="table table-condensed">
                <tr>
                    <td colspan="1" style="font-size: 12px; width: 95px;"><strong>Cod. Socio:</strong></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><span ng-bind="socio.id"></span></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><strong>Estado:</strong></td>
                    <td colspan="1" style="font-size: 12px;"><span ng-cloak>{{socio.estado ? 'ACTIVO' : 'INACTIVO'}}</span></td>
                </tr>
                <tr>
                    <td style="font-size: 12px;"><strong>Fec. Apertura:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="socio.fechaInicio | date : 'dd/MM/yyyy'"></span></td>
                    <td style="font-size: 12px;"><strong>Fecha Retiro:</strong></td>
                    <td style="font-size: 12px;">
                        <span ng-cloak>{{socio.fechaFin === undefined ? 'INDEFINIDO' : socio.fechaFin | date : 'dd/MM/yyyy'}}</span>
                    </td>
                </tr>
            </table>
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-6" style="font-weight: bold;">
                        Cuenta Aporte
                        <span ng-if="cuentaAporte.estadoCuenta == 'CONGELADO'" class="label label-warning">Congelado</span>
                        <span ng-if="cuentaAporte.estadoCuenta == 'INACTIVO'" class="label label-danger">Inactivo</span>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
            </div>
            <div class="panel-body" ng-show="!cuentaAporte">
                <p>Cuenta de Aportes no Encontrado.</p>
            </div>
            <table class="table table-condensed" ng-show="cuentaAporte">
                <tr>
                    <td colspan="1" style="font-size: 12px; width: 95px;"><strong>Moneda:</strong></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><span ng-bind="cuentaAporte.moneda.denominacion"></span></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><strong>Num. Cuenta:</strong></td>
                    <td colspan="1" style="font-size: 12px;"><span ng-bind="cuentaAporte.numeroCuenta"></span></td>
                </tr>
                <tr>
                    <td style="font-size: 12px;"><strong>Saldo:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="cuentaAporte.saldo | currency : cuentaAporte.moneda.simbolo"></span></td>
                    <td style="font-size: 12px;"><strong>Estado Cuenta:</strong></td>
                    <td style="font-size: 12px;"><span ng-bind="cuentaAporte.estadoCuenta"></span></td>
                </tr>
            </table>
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-5" style="font-weight: bold;">
                        Apoderado
                    </div>
                    <div class="col-md-7" ng-if="socio.estado">
                        <div class="text-right">
                            <button type="button" ng-if="apoderado" ng-click="eliminarApoderado()" class="btn btn-link" style="padding: 0px 12px;">Eliminar</button>
                            <button type="button" ng-click="cambiarApoderado()" class="btn btn-link" style="padding: 0px 12px;">Cambiar</button>
                            <button type="button" ng-if="apoderado" ng-click="editarApoderado()" class="btn btn-link" style="padding: 0px 12px;">Editar</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body" ng-show="!apoderado">
                <p>Apoderado no Encontrado.</p>
            </div>
            <table class="table table-condensed" ng-show="apoderado">
                <tr>
                    <td style="font-size: 12px;"><strong>Documento:</strong></td>
                    <td colspan="3" style="font-size: 12px;"><span ng-bind-template="{{apoderado.tipoDocumento.abreviatura}}/{{apoderado.numeroDocumento}}"></span></td>
                </tr>
                <tr>
                    <td style="font-size: 12px;"><strong>Ap. y Nombres:</strong></td>
                    <td colspan="3" style="font-size: 12px;"><span ng-bind-template="{{apoderado.apellidoPaterno}} {{apoderado.apellidoMaterno}}, {{apoderado.nombres}}"></span></td>
                </tr>
                <tr>
                    <td colspan="1" style="font-size: 12px; width: 95px;"><strong>Fecha Nac.:</strong></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><span ng-bind="apoderado.fechaNacimiento | date : 'dd/MM/yyyy'"></span></td>
                    <td colspan="1" style="font-size: 12px; width: 100px;"><strong>Sexo:</strong></td>
                    <td colspan="1" style="font-size: 12px;"><span ng-bind="apoderado.sexo"></span></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading" style="font-weight: bold;">Cuentas Bancarias</div>
            <div class="panel-body" ng-show="cuentasBancarias.length == 0">
                <p>No se Encontraron Cuentas Bancarias....</p>
            </div>
            <table class="table table-condensed" ng-show="cuentasBancarias.length != 0">
                <thead>
                <tr style="font-size: 12px;">
                    <th>Tipo Cuenta</th>
                    <th>N&uacute;mero Cuenta</th>
                    <th>Moneda</th>
                    <th>Saldo</th>
                    <th>Fec. Apertura</th>
                    <th>Fec. Cancel.</th>
                    <th>N&deg; Retirantes</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="cuenta in cuentasBancarias">
                    <td style="font-size: 12px;"><span ng-bind="cuenta.tipoCuentaBancaria"/></td>
                    <td style="font-size: 12px;"><span ng-bind="cuenta.numeroCuenta"/></td>
                    <td style="font-size: 12px;"><span ng-bind="cuenta.moneda.denominacion"/></td>
                    <td style="font-size: 12px;"><span ng-bind="cuenta.saldo"/></td>
                    <td style="font-size: 12px;"><span ng-bind="cuenta.fechaApertura | date : 'dd/MM/yyyy'"/></td>
                    <td style="font-size: 12px;">
                        <span ng-show="cuenta.fechaCierre" ng-bind="cuenta.fechaCierre | date : 'dd/MM/yyyy'"/>
                        <span ng-show="!cuenta.fechaCierre">INDEFINIDO</span>
                    </td>
                    <td style="font-size: 12px; text-align: center"><span ng-bind="cuenta.cantidadRetirantes"/></td>
                    <td style="font-size: 12px;"><span ng-bind="cuenta.estado"/></td>
                    <td>
                        <button type="button" class="btn btn-info btn-xs" ng-click="editarCuentaBancaria($index)">
                            <span class="glyphicon glyphicon-share"></span>Editar
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
